<template>
  <boder-box-1>
    <dv-card :cardBg="require('@/assets/threeGovernment/1bg.png')">
      <template #header>
        <dv-title1
          :background-image-url="
            require('@/assets/threeGovernment/titleBj.png')
          "
          >十大民生</dv-title1
        >
      </template>
      <div class="content">
        <Progress
          v-for="(v, i) in progressData"
          :key="i"
          :name="v.name"
          :value="v.value"
          :unit="v.unit"
          :max="v.max"
          valueColor="#26DFFE"
          :round="true"
          background="#1B345D"
          :area="true"
          style="color: #fff"
        />
        <Image
          :src="require('@/assets/components/654333/a8.png')"
          width="395"
        ></Image>
      </div>
    </dv-card>
  </boder-box-1>
</template>

<script>
import BoderBox1 from "@/components/BorderBox1/index.vue";
import DvTitle1 from "@/components/DvTitle1";
import DvCard from "@/components/DvCard/index.vue";
import Progress from "@/components/charts/Progress";
import Image from "@/components/Image";
export default {
  name: "TenReputation",
  data() {
    return {
      progressData: [
        {
          name: "实施交通畅通工程,构建高效便捷交通体系",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: "改善中小学,幼儿园办学条件,提升教育教学环境",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: "加强食品安全和放心消费工作",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: "提升老助残服务水平,增进老年人残疾人福祉",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: `深入推进农房"安居工程",提升城乡宜居水平`,
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: "提升医疗卫生医护水平,增强群众出行条件",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: `开展"美丽乡村"建设,打造"歌山画水"和美乡村`,
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: "完善垃圾分类体,提升城乡人居环境",
          value: "91",
          unit: "91%",
          max: "100",
        },
        {
          name: `实施全民防诈骗工程,用心守护群众"钱袋子"`,
          value: "91",
          unit: "91%",
          max: "100",
        },
      ],
    };
  },
  components: {
    BoderBox1,
    DvTitle1,
    DvCard,
    Progress,
    Image,
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 22px 18px 22px;
  box-sizing: border-box;
}
</style>
